import React, {useState} from 'react';
import {Form, Button, Input, Modal, Row, Col} from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const UpdateForm = props => {
  const [formVals, setFormVals] = useState({
    lineName: props.values.lineName,
    alarmType: props.values.alarmType,
    clientAppId: props.values.clientAppId,
    requestTime: props.values.requestTime,
    appId: props.values.appId,
    appKey: props.values.appKey,
    expendTime: props.values.expendTime,
    sendWeixinFlag: props.values.sendWeixinFlag,
    clientRequestResult: props.values.clientRequestResult,
    // key: props.values.key,
    // target: '0',
    // template: '0',
    // type: '1',
    // time: '',
    // frequency: 'month',
  });
  const {TextArea} = Input;
  const [form] = Form.useForm();
  const {
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;


  const renderContent = () => {

    return (
      <>
        <Row gutter={16}>
          <Col className="gutter-row" span={12}>
            <FormItem
              name="lineName"
              label="产线名称"
            >
              <Input bordered={false}/>
            </FormItem></Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="alarmType"
              label="告警类型"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="appId"
              label="业务AppId"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="appKey"
              label="业务AppKey"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="clientAppId"
              label="客户AppId"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="requestTime"
              label="请求时间"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="expendTime"
              label="请求耗时"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="sendWeixinFlag"
              label="告警状态"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <FormItem
              name="clientRequestResult"
              label="请求结果"
              labelCol={2}
            >
              <TextArea autoSize={{minRows: 3}} bordered={false}/>
            </FormItem>
          </Col>
        </Row>

      </>
    );
  };

  const renderFooter = () => {

    return (
      <>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="告警详情"
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >
      <Form
        layout="horizontal"
        {...formLayout}
        form={form}
        initialValues={{
          lineName: formVals.lineName,
          alarmType: formVals.alarmType,
          appId: formVals.appId,
          appKey: formVals.appKey,
          clientAppId: formVals.clientAppId,
          requestTime: formVals.requestTime,
          expendTime: formVals.expendTime,
          sendWeixinFlag: formVals.sendWeixinFlag === "1" ? "发送异常" : "发送成功",
          clientRequestResult: formVals.clientRequestResult,
        }}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default UpdateForm;
